前端构建之webpack

之前写了一个前端构建之gulp，同样的目的写一个webpack， 内容基本上和gulp一样，主要用来自己学习记录。

为什么需要前端构建

不解释

本文大致分为以下几个内容：

规范校验js代码（jslint）
js解释器（babel）
合并js代码（concat）
压缩js代码（uglify）
sourcemap
规范校验css代码(csslint)
css解释器
合并css代码
压缩css代码

规范校验js代码

1. 用webpack检测js代码规范

js检测工具用来

检测自己写的js是否有语法错误
是否根据我们设定的规则写的

常用的js检测工具有jshint、jslint、eslint等，推荐用eslint。
在webpack中，推荐用eslint这个插件。使用eslint时配置一个.eslintrc文件，用来编写自定义js规则。
如果用到了es模块，需要在.eslintrc配置中指定parserOptions的sourceType为module。

{
  "root": true,
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "parserOptions": {
    "sourceType": "module"
  },
  "extends": "eslint:recommended",  //使用推荐的eslint语法
  "rules": {
    "indent": ["error", 4], //自定义indent为4个空格，级别为error
    "semi": ["off", "always"],
    "no-console": "off",
    "no-unused-vars": "off"
  }
}

2. 使用prettier强制修改js代码

使用prettier，根据prettier自定义来强制修改js代码。
可以在使用prettier时添加options，或者建立一个config文件来配置options也可以。
参考这里

        {
            singleQuote: true,
            trailingComma: "all",
            bracketSpacing : true,
            semi: true,
            tabWidth: 4,  //定义indent为4个空格
            printWidth: 120
        }

3. precommit

这个插件目的是在commit之前，执行相关操作
"precommit": "gulp format_js"

4. husky

这个插件目的是建立和git之间的hooks（钩子），通常和precommit结合用，
比如使用git commit这个命令时，会通过hooks调用precommit语句。
这样我们就不需要专门去执行npm run precommit这个命令了，
当我们git commit的时候，husky会自动调用npm run precommit。

5. lint-staged

但是还有一个问题，上面执行完git commit 后，通过prettier修改了所有的js文件，
有些便不是我自己修改的文件，也会被强制修改，
于是可以通过lint-staged这个node模块来指定stage中的文件。
思想很简单，只对git stage中的文件处理。
可以参考这里

通常使用它的思想：

执行git commit时，通过husky调用precommit
precommit 执行lint-staged，即只对git stage中的文件进行处理
在lint-staged中配置prettier修改js文件(添加一个config文件来配置)
在lint-staged中配置eslintjs检测文件(添加一个eslintrc文件来配置)
如果正常通过，则把通过prettier修改和eslint检测的js文件,通过git add 添加

  "scripts": {  
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [                 // 要处理的js路径
      "prettier --write",  //要处理的文件上修改
      "eslint  --fix",       // 参数fix的意思是：根据eslint配置文件自动修复js文件
      "git add"
    ]
  },

prettier 能强制修改js，eslint --fix也能强制修改js，区别是什么呢？？？
我的理解prettier更强一点，eslint --fix 强制修改有限。

这里有一个注意点,prettier的配置参数，通过添加一个config文件来配置。

可以在使用prettier时添加options，或者建立一个config文件来配置options也可以。

"lint-staged"的配置的意思是，
坑对git stage中的文件的操作，如eslint *.js, git add *.js, 不能用写gulp *.js
参考这里

我添加的是 prettier.config.js文件，

module.exports = {
    printWidth: 120,
    parser: "flow",
    singleQuote: true,
    tabWidth: 4,
    bracketSpacing : true,
    semi: true
};

eslintrc前面已经写过了。

通过lint-staged就不需要第7步中生成一个临时文件（tempjs）来过渡了， 
因为prettier就直接处理stage终端文件了。

思想：

通过lint-staged获取想要处理的js文件
通过prettier 根据自定义规则强制修改要处理的js文件
eslint检测通过prettier强制修改的js文件
eslint检测通过的话，将处理的js文件添加到git stage中

使用es6写js时，转化为各个浏览器能识别的es5

6. babel 编译

babel用来将es6语法转化为es5， 比如es6中的let转化为var， 变量字符串拼接转化为+，等等。
结合webpack用，就需要使用webpack强大的loader， 它依赖于babel-core，所以需要安装babel-loader和babel-core。

自己的理解： babel, babel-core提供了babel的运行环境（理解有错误的话，之后改正）。
只有这两个（babel, babel-core）还不能实现转译，需要transform插件（如babel-preset-env）
然后需要安装babel-preset-env来将自己写的es6（源码），根据当前执行环境（浏览器），
转化为es5（当前环境-浏览器能识别的语法）

合并js

为什么需要合并js呢，通过合并js文件，可以减少http请求。

7. concat

通过webpack可以将多个js文件合并成一个js文件。
一个入口文件，一个输出。
用法相对简单，

现在有一个新的需求task1，需要单独写几个js文件，
但是不想和其他js合并到一起，也就是说想单独合并这几个js文件，然后单独输出，
这个时候，就多入口文件，多个输出。

比起gulp来，webpack可以很方便的实现这个功能。

压缩js

8. uglify

webpack中可以使用 uglifyjs-webpack-plugin用来压缩js文件
压缩很简单，获取js原文件，合并，然后压缩

sourcemap

9. sourcemaps

 sourcemap 的目的：还原源码，
 什么意思呢？ 当我们将源码经过合并，压缩处理后，成为了一个文件，不方便调试。
 特别是压缩后更是面目全非，这样我们在开发阶段不能实现debug，比如打断点功能就不可能实现了。
 sorucemap就是解决的这个问题。
 
 经过sourcemap处理后，在目标目录（dest指定的）下，生成一个新文件（与转译前对应的map文件），
 目录结构与转译前完全对应。这样我们就很容易找到某个文件，然后实现打断点。
 
 webpack自带sourcemap功能，只需要添加devtool既可以。

规范校验css代码

规范校验js写法的工具有jslint，jshint，最近的eslint等等，
规范校验css写法的工具有csslint，stylelint等等。

10. stylelint

stylelint用来检测css是否根据配置文件来写的，是基于postcss的一个检测工具。
stylefmt是一个根据stylelint的配置文件来强制修改css文件的插件。有点prettier的意思。

但是可以不用stylefmt，在stylelint的选项中添加 --fix 也可以修改css文件。

npm install postcss stylelint-loader stylelint stylelint-config-standard -save-dev

使用stylelint时，有个标准配置插件， stylelint-config-standard。

以下为 stylelint的配置文件(.stylelintrc)

{
    "extends": "stylelint-config-standard",    // 使用stylelint的默认标准配置
    "rules": {
        "declaration-block-trailing-semicolon": null,   // 各种规则，根据自己需要可以灵活配置
        "indentation": 4,
        "block-no-empty": null,
        "max-empty-lines": 1,
        "selector-list-comma-newline-after": never-multi-line,
        "at-rule-no-unknown": null,
        "declaration-colon-space-after": null,
        "no-duplicate-selectors" : null,
        "no-descending-specificity": null,
        "selector-pseudo-element-colon-notation": null,
        "no-empty-source": null
    }
}

11. postcss

当我们用sass的写法来书写css
想在css中用变量，for循环等语法
想利用（cssnext）[http://cssnext.io/] 书写css时
根据不同浏览器自动添加前缀 (autoprefixer)

当我们想在css中实现上述等功能时，可以用postcss。
postcss就是一个平台，可以通过添加各种插件来实现上述等功能。

npm install postcss-cssnext postcss-simple-vars postcss-nested --save-dev

可以写一个postcss的配置文件来专门规范postcss相关的配置，也可以直接写在在webpack配置文件中。

css合并

webpack很方便的实现css合并

最后附上完整的(github源代码)[https://github.com/zhangchch/...]。

 以上都是自己的理解，如有错误的地方，真心求指教。

前端构建之webpack